<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>💥王婕给你的专属烟花🎆</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="#000000">
    <link rel="shortcut icon" type="image/png"
        href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
    <link rel="icon" type="image/png"
        href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
    <link rel="apple-touch-icon-precomposed"
        href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
    <meta name="msapplication-TileColor" content="#000000">
    <meta name="msapplication-TileImage"
        content="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
    <link rel="stylesheet" href="./css/style.css">
    <style>
        .canvas-container {
            /* 这里替换背景图片 替换背景图片的地址，可以是 ./image.jpg 记得把资源放在当前文件夹中 */
            background-image: url("image.jpg");
            background-size: cover;
            background-position: center;
        }
    </style>
    <script src="https://wechat-small-app.oss-cn-hangzhou.aliyuncs.com/bbp/yh/js/lib/jquery.min.js"
        type="text/javascript"></script>
    <script>
        var shouci = true;
        function bodyPlayMusic() {
            if (shouci) {
                shouci = false;
                audio.play();
            }
        };

    </script>
</head>

<body>


    <img id="music_ico" onclick="" alt="" style=" display: inline; float: right;  ">

    <!-- 这里替换音乐链接 或者本地音乐资源 ./music.mp3  -->
    <audio id="audioDom" src="http://dl.stream.qqmusic.qq.com/C400001NVaUN1tQ9m7.m4a?guid=8292291520&vkey=8265767B09CDDBC86E768E2583192E65033259BFBF5819B1DBE09E624693342714B751AD3995B0948C1EFED1434B56E94756CABB3F8C5750&uin=2041085611&fromtag=120032"auto" loop="loop"></audio>

    <div id="wish_text"></div>

    <div id="yhBtn"
        style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff ; font-size:15px">
        <p>💥点爆</p>
        <img style="width:64px;margin-bottom:24px "
            src="https://p9.toutiaoimg.com/img/tos-cn-i-qvj2lq49k0/060990dac854444ab7a927b5b3311fe4~tplv-tt-shrink:640:0.image">

    </div>

    <!-- App -->
    <div class="container">
        <div class="loading-init">
            <div class="loading-init__header"></div>
            <div class="loading-init__status"></div>
        </div>
        <div class="stage-container remove">
            <div class="page_two hide">
                <div class="type_words" id="contents"></div>
            </div>
            <div class="canvas-container">
                <canvas id="trails-canvas"></canvas>
                <canvas id="main-canvas"></canvas>
            </div>

            <div class="menu hide">
                <div class="menu__inner-wrap">
                    <div class="btn btn--bright close-menu-btn">
                        <svg fill="white" width="24" height="24">
                            <use href="#icon-close" xlink:href="#icon-close"></use>
                        </svg>
                    </div>

                    <div class="menu__header">设置</div>

                    <form>
                        <div class="form-option form-option--select">
                            <label class="shell-type-label">烟花类型</label>
                            <select class="shell-type"></select>
                        </div>
                        <div class="form-option form-option--select">
                            <label class="shell-size-label">烟花大小</label>
                            <select class="shell-size"></select>
                        </div>
                        <div class="form-option form-option--select">
                            <label class="quality-ui-label">画质</label>
                            <select class="quality-ui"></select>
                        </div>
                        <div class="form-option form-option--select">
                            <label class="sky-lighting-label">天空照明</label>
                            <select class="sky-lighting"></select>
                        </div>
                        <div class="form-option form-option--select">
                            <label class="scaleFactor-label">规模</label>
                            <select class="scaleFactor"></select>
                        </div>
                        <div class="form-option form-option--checkbox">
                            <label class="auto-launch-label">自动发射</label>
                            <input class="auto-launch" type="checkbox">
                        </div>
                        <div class="form-option form-option--checkbox form-option--finale-mode">
                            <label class="finale-mode-label">结局模式</label>
                            <input class="finale-mode" type="checkbox">
                        </div>
                        <div class="form-option form-option--checkbox">
                            <label class="hide-controls-label">隐藏控制器</label>
                            <input class="hide-controls" type="checkbox">
                        </div>
                        <div class="form-option form-option--checkbox form-option--fullscreen">
                            <label class="fullscreen-label">全屏</label>
                            <input class="fullscreen" type="checkbox">
                        </div>
                        <div class="form-option form-option--checkbox">
                            <label class="long-exposure-label">打开快门</label>
                            <input class="long-exposure" type="checkbox">
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="help-modal">
            <div class="help-modal__overlay"></div>
            <div class="help-modal__dialog">
                <div class="help-modal__header"></div>
                <div class="help-modal__body"></div>
                <button type="button" class="help-modal__close-btn">关闭</button>
            </div>
        </div>
    </div>

    <!-- partial -->
    <script type="text/javascript" src="./js/common.js"></script>
    <script type="text/javascript" src="./js/script.js"></script>
    <script type="text/javascript">
        /*这里更改祝福语*/
        function wishFun() {
            const wish = [
                "2023新年快乐",
                "兔然暴富",
                "Happy New Year",
                "财源滚滚",
                "兔年大吉"
            ];
            const text = document.getElementById('wish_text');
            if (text.classList.contains('wish_text')) {
                text.classList.remove("wish_text");
            }
            let i = -1;
            var timer = null;
            clearInterval(timer);
            /*开始定时器*/
            timer = setInterval(() => {
                if (Math.random() * 100 > 2) {
                    if (i < wish.length - 1) {
                        i += 1;
                    } else {
                        i = 0;
                    }
                    text.innerText = wish[i];
                    text.classList.add("wish_text");
                }
            }, 3000);
        }
        function musicPlay(isPlay) {
            var media = document.querySelector('#audioDom');
            if (isPlay && media.paused) {
                media.play();
            }
            if (!isPlay && !media.paused) {
                media.pause();
            }
        }
        function musicInBrowserHandler() {
            setTimeout(function () {
                musicPlay(true)
            }, 0)
        }
        document.body.addEventListener('touchstart', musicInBrowserHandler);
        document.body.addEventListener('click', musicInBrowserHandler);

        $('#yhBtn').click(e => {
            $('#yhBtn').hide()
            setTimeout(() => {
                start()
                fireworks();
            }, 1000) /* 这里的5000 是5s指烟花延时时间*/
            setTimeout(() => {
                function audioAutoPlay() {
                    var audio = document.getElementById('audioDom');
                    audio.play();
                }
                audioAutoPlay();
                /*这里是全屏的祝福语 想要展示*/
                 wishFun(); 
            }, 1000) // 这里的5000 是5s指音乐延时时间
            console.log(updateConfig({ autoLaunch: true }));
        })
        function fireworks() {
            $('.page_two').removeClass('hide');
        }
        function start() {
             // 这里是右上角的祝福语
            const text = [
                '愿你在新的一年里平安快乐.',
                "于我而言，有你这样的朋友陪伴我，感到无比的开心",
                "新年快乐🎆"
            ]
            let str = text.join('<br><br>')
            let str_ = ''
            let i = 0
            let content = document.getElementById('contents')
            let timer = setInterval(() => {
                if (str_.length < str.length) {
                    str_ += str[i++]
                    content.innerHTML = '<p>' + str_ + '<span class="xx" style="opacity: 1;color: red;">🎇</span></p>'                        //打印时加光标
                } else {
                    clearInterval(timer)
                    content.innerHTML = '<p>' + str_ + '</p>'
                }
            }, 100)
        }
    </script>
    <script type="text/javascript" src="./js/other.js"></script>
</body>

</html>